
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>座位使用统计</title>
    <link href="css/styles.css" th:href="@{/css/styles.css}" rel="stylesheet"/>
    <link href="css/dataTables.bootstrap4.min.css" th:href="@{/css/dataTables.bootstrap4.min.css}" rel="stylesheet" crossorigin="anonymous">
    <script src="js/all.min.js" th:src="@{/js/all.min.js}" crossorigin="anonymous"></script>
</head>
<body class="sb-nav-fixed">
<!--公共部分-->
<div th:replace="commons/bar::topbar"></div>
<div id="layoutSidenav">
    <div id="layoutSidenav_nav">
        <div th:replace="commons/bar::sidebar"></div>
    </div>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid">
                <h1 class="mt-4">使用记录</h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/user22}">主页</a></li>
                    <li class="breadcrumb-item active">座位使用统计</li>
                </ol>
                <div class="card mb-4">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-4"><i class="fas fa-user" aria-hidden="true"></i>座位使用统计</div>
<!--                            <div class="col-1"><button type="button" class="btn btn-warning" id="exportTable"><i class="fas fa-table" aria-hidden="true"></i>导出</button></div>-->
                            <div class="col-3">
                                <span class="text-danger" id="queryUserInfo"></span>
                            </div>
                            <div class="col-2">
                                <input type="text" placeholder="输入用户ID" class="form-control" maxlength="16" id="queryByUserID">
                            </div>
                            <div class="col-1">
                                <button type="button" class="btn btn-info" id="queryBySeatID_btn"><i class="fas fa-search" aria-hidden="true"></i>搜索</button>
                            </div>
                            <div class="col-2">
                                <button type="button" class="btn btn-info" id="queryAll"><i class="fas fa-search" aria-hidden="true"></i>查询全部</button>
                            </div>
                        </div>

                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="seatUseTable" width="100%" cellspacing="0">
                                <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>用户ID</th>
                                    <th>座位号</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th>状态记录</th>
                                    <th>操作</th>
                                </tr>
                                </thead>

                                <tbody id="seatUserInfo">
<!--                                <tr th:each="su:${sus}" >-->
<!--                                    <td th:text="${su.seatuseid}"></td>-->
<!--                                    <td th:text="${su.userid}"></td>-->
<!--                                    <td th:text="${su.seatid}"></td>-->
<!--                                    <td th:text="${#dates.format(su.begintime, 'yyyy-MM-dd HH:mm')}"></td>-->
<!--                                    <td th:text="${#dates.format(su.endtime, 'yyyy-MM-dd HH:mm')}"></td>-->
<!--                                    <td th:text="${su.state}=='1'?'预约记录':'使用记录'"></td>-->
<!--                                    <td style="text-align: center">-->
<!--                                        <button type="button" class="btn btn-primary" th:attr="cp_id=${fd.cpid},user_id=${fd.userid}" id="cpidAnduserid">详细信息</button>-->
<!--                                    </td>-->
                                </tr>
                                </tbody>
                            </table>
                            <!-- 分页条 -->
                            <div class="row">
                                <!-- 分页文字信息 -->
                                <div class="col-md-6" id="page_info_area">
                                    <!-- <h4>当前页第*页,总页码：,总记录：</h4> -->
                                </div>
                                <!-- 分页条信息 -->
                                <div class="col-md-6" id="page_nav_area"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </main>
        <footer class="py-4 bg-light mt-auto">
            <div class="container-fluid">
                <div class="d-flex align-items-center justify-content-between small">
                    <div class="text-muted">Copyright &copy; Your Website 2020</div>
                    <div>
                        <a href="#">联系：m15952086301@163.com</a>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>
<script src="js/jquery-3.4.1.min.js" th:src="@{/js/jquery-3.4.1.min.js}" crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js" th:src="@{/js/bootstrap.bundle.min.js}" crossorigin="anonymous"></script>
<script src="js/scripts.js" th:src="@{/js/scripts.js}"></script>
<script src="js/jquery.dataTables.min.js" th:src="@{/js/jquery.dataTables.min.js}" crossorigin="anonymous"></script>
<script src="js/dataTables.bootstrap4.min.js" th:src="@{/js/dataTables.bootstrap4.min.js}" crossorigin="anonymous"></script>
<script src="js/datatables-demo.js" th:src="@{/js/datatables-demo.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/5.2.0/js/tableexport.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.6/xls.min.js"></script>
<script type="text/javascript">
    var totalRecord;
    var currentPage;
    $(function() {
        to_page(1);
    })
    function to_page(pn){
        $.ajax({
            url: "/seatUsePage/",
            data: "pn=" + pn,
            type: "GET",
            success:function(result){
                //console.log();
                //1.解析并显示员工数据
                bulid_emps_table(result);
                //2.显示分页信息
                build_page_info(result);
                //3.解析并显示分页信息
                build_page_nav(result);
            }
        });
    }
    //日期格式
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
    //表格数据
    function bulid_emps_table(result){
        //清空table表格数据
        $("#seatUseTable tbody").empty();
        var seatUses=result.extend.pageInfo.list;
        $.each(seatUses,function(index,item){
            var seatuseidTd=$("<td></td>").append(item.seatuseid);
            var useridTd=$("<td></td>").append(item.userid);
            var seatidTd=$("<td></td>").append(item.seatid);
            var beginTimeTd=$("<td></td>").append(new Date(item.begintime).format("yyyy-MM-dd hh:mm:ss"));
            var endTimeTd=$("<td></td>").append(new Date(item.endtime).format("yyyy-MM-dd hh:mm:ss"));
            var stateTd=$("<td></td>").append(item.state=='1'?'预约记录':'使用记录');
            var delBtn=$("<button></button>").addClass("btn btn-danger btn-sm del_btn")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash").append("删除"));
            var btnTd=$("<td></td>").append(delBtn);
            delBtn.attr("seatuse_id",item.seatuseid);
            //append方法执行完成以后还是返回原来的元素
            $("<tr></tr>").append(seatuseidTd)
                .append(useridTd)
                .append(seatidTd)
                .append(beginTimeTd)
                .append(endTimeTd)
                .append(stateTd)
                .append(btnTd)
                .appendTo("#seatUseTable tbody");
        });
    }

    //解析显示分页信息
    function build_page_info(result) {
        $("#page_info_area").empty();
        var page_area = result.extend.pageInfo;
        $("#page_info_area").append($("<h5></h5>").append("当前页："+page_area.pageNum+",总页数："+page_area.pages+",总记录数："+page_area.total));
        totalRecord = page_area.total;
        currentPage = page_area.pageNum;
    }
    //解析分页条数据，点击分页要能到下一页
    function build_page_nav(result){
        $("#page_nav_area").empty();
        var ul=$("<ul></ul>").addClass("pagination");
        var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").addClass("page-link").attr("href","#"));
        var prePageLi=$("<li></li>").append($("<a></a>").addClass("page-link").append("&laquo;"));
        //如果不存在上一页，首页和上一页按钮禁用，如果存在上一页，可以进行点击事件（不会发请求）
        if(result.extend.pageInfo.hasPreviousPage==false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }else{
            //点击事件
            firstPageLi.click(function(){
                to_page(1);
            });
            prePageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum-1);
            });
        }
        var nextPageLi=$("<li></li>").append($("<a></a>").addClass("page-link").append("&raquo;"));
        var lastPageLi=$("<li></li>").append($("<a></a>").addClass("page-link").append("末页").attr("href","#"));
        if(result.extend.pageInfo.hasNextPage==false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }else{
            //点击事件
            nextPageLi.click(function(){
                to_page(result.extend.pageInfo.pageNum+1);
            });
            lastPageLi.click(function(){
                to_page(result.extend.pageInfo.pages);
            });
        }
        ul.append(firstPageLi).append(prePageLi);
        //遍历给UL中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
            var numLi=$("<li></li>").append($("<a></a>").addClass("page-link").append(item));
            if(result.extend.pageInfo.pageNum==item){
                numLi.addClass("text-primary");
            }
            numLi.click(function(){
                to_page(item);
            });
            ul.append(numLi);

        });
        ul.append(nextPageLi).append(lastPageLi);
        var navEle=$("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }
    $(document).on('click','#exportTable',function () {

        $('table').tableExport({
            type:'excel',
            fileName:'座位使用记录统计表格',
            escape:'false'
        });
    })

    /***************************************删除操作********************/
    $(document).on("click",".del_btn",function(){
        var seatuseid = $(this).attr("seatuse_id");
        if(confirm("确定删除"+seatuseid+"座位记录吗？")){
            //如果点击确定，发送ajax请求去删除
            $.ajax({
                url: "/deleteSeatUseByID/" + seatuseid,
                type: "DELETE",
                success: function(result){
                    to_page(currentPage);
                }
            });
        }
    })
    /********************************根据用户ID查询该座位信息*****************************************/
    $(document).on('click','#queryBySeatID_btn',function () {
        if($('#queryByUserID').val() == ""){
            $("#queryUserInfo").text("请输入用户ID!");
            return false;
        }else {
            $("#queryUserInfo").text("");
        }
        var userid = $('#queryByUserID').val();
        $.ajax({
            url:"/queryByUserID/"+userid,
            type:"GET",
            success:function(result) {
                if(result.code == 100){
                    //console.log();
                    //1.解析并显示员工数据
                    bulid_emps_table(result);
                    //2.显示分页信息
                    build_page_info(result);
                    //3.解析并显示分页信息
                    build_page_nav(result);
                    $("queryUserInfo").text("");
                }else {
                    $("#queryUserInfo").text("没有查到，请重新输入!");
                }
            }
        })
    })
    $(document).on('click','#queryAll',function () {
        to_page(1);
    })
</script>
</body>
</html>
